    <div id="main-wrapper">
<div id="wrapper">

    <article id="main">
        <section class="promo-section">
            <div class="holder">
                <h1>Flat UI<span>Pro</span><dt>1.3.2</dt></h1>
                <p>Flat UI Pro is made on the basis of Twitter Bootstrap in a stunning flat-style, and the kit also includes a PSD version for designers.</p>
                <a href="#buy" class="btn" id="buynowbutton">Buy Now</a>
            </div>
        </section>
        <a id="all-elements" class="zoomify" target="_blank" href="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/1.Basic-Elements.png">
            <span class="elem-section">
                <span class="holder">
                    <span class="frame">
                        <h2>Useful Elements</h2>
                        <p>Flat UI Pro contains a huge number of basic components, icons and glyphs, which simplify your work when it comes to new projects. Don’t waste time reinventing the wheel, use Flat UI Pro to get started.</p>
                    </span>
                </span>
                <span class="elements-nav">
                    <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/all-elelemtns-thumb.png" alt="Basic Elements" width="552" height="408">
                    <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/eye-icon.png" class="icon">
                </span>
                <div class="buttonholder">
                    <span class="fakeButton">View All Elements (2 Mb)</span>
                </div>
            </span>
        </a>

        <section class="item-section">
            <div class="holder">
                <ul class="item-list">
                    <li style="opacity: 1;">
                        <div class="visual">
                            <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/ico-1.png" width="100px" alt="image description" class="nosvg">
                            <span class="svg">
                                <svg width="100px" height="100px" id="loop" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                                <g id="circle">
                                <path fill="#E74C3C" d="M50,0c27.613,0,50,22.386,50,50s-22.387,50-50,50C22.386,100,0,77.614,0,50S22.386,0,50,0z"></path>
                                </g>
                                <path id="loop-sign" stroke-linejoin="round" fill="none" stroke="#F0C419" stroke-width="8" stroke-miterlimit="10" stroke-dashoffset="0" stroke-linecap="square" stroke-dasharray="216" d="M12.5,50.5c0,10,7,17,17,17c17,0,26-34,43-34c10,0,18,7,18,17s-8,17-18,17c-17,0-26-34-43-34C19.5,33.5,12.5,40.5,12.5,50.5z"></path>
                                <path id="shade" opacity="0.15" enable-background="new    " d="M45.938,50.5l5.047,6.516c0,0-2.141,2.797-3.5,4.25c0,0-3.621-3.552-5.746-5.583C43.047,54.281,45.938,50.5,45.938,50.5z"></path>
                                </svg>

                            </span>
                        </div>
                        <div class="frame">
                            <h3>A Lot of Components</h3>
                            <p>All the elements that are contained in Bootstrap, plus a few more.</p>
                        </div>
                    </li>
                    <li style="opacity: 1;">
                        <div class="visual">
                            <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/ico-2.png" width="100px" alt="image description" class="nosvg">
                            <span class="svg">
                                <svg width="100px" height="100px" id="bootstrap" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                                <circle id="bootstrap-bg" fill-rule="evenodd" clip-rule="evenodd" fill="#4A245A" cx="50" cy="50" r="50"></circle>
                                <g id="lines">
                                <clipPath id="bootstrapmask">
                                    <path d="M49.952,99.999c-27.64,0-50.046-22.385-50.046-50C-0.094,22.385,22.312,0,49.952,0C77.594,0,100,22.385,100,49.999C100,77.614,77.594,99.999,49.952,99.999z"></path>
                                </clipPath>
                                <g id="all-lines" clip-path="url(#bootstrapmask)" opacity="0.2" transform="rotate(0,50,50)">
                                <line id="line-6-1" fill="none" stroke="#FFFFFF" stroke-width="2" x2="17" y2="31" x1="50" y1="12"></line>
                                <line id="line-6" fill="none" stroke="#FFFFFF" stroke-width="2" x1="17" y1="31" x2="-16" y2="12"></line>
                                <line id="line-5-6" fill="none" stroke="#FFFFFF" stroke-width="2" x2="17" y2="69" x1="17" y1="31" opacity="0"></line>
                                <line id="line-5" fill="none" stroke="#FFFFFF" stroke-width="2" x2="-16" y2="88" x1="17" y1="69"></line>
                                <line id="line-4-5" fill="none" stroke="#FFFFFF" stroke-width="2" x2="50" y2="88" x1="17" y1="69"></line>
                                <line id="line-4" fill="none" stroke="#FFFFFF" stroke-width="2" x2="50" y2="126" x1="50" y1="88" opacity="0"></line>
                                <line id="line-3-4" fill="none" stroke="#FFFFFF" stroke-width="2" x1="50" y1="88" x2="83" y2="69" opacity="0"></line>
                                <line id="line-3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="83" y1="69" x2="116" y2="88"></line>
                                <line id="line-2-3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="83" y1="69" x2="83" y2="31"></line>
                                <line id="line-2" fill="none" stroke="#FFFFFF" stroke-width="2" x1="83" y1="31" x2="116" y2="12"></line>
                                <line id="line-1-2" fill="none" stroke="#FFFFFF" stroke-width="2" x1="83" y1="31" x2="50" y2="12"></line>
                                <line id="line-1" fill="none" stroke="#FFFFFF" stroke-width="2" x1="50" y1="12" x2="50" y2="-33"></line>
                                <circle id="circle-3-child" fill-rule="evenodd" fill="#FFFFFF" cx="83" cy="69" r="4"></circle>
                                <circle id="circle-3" fill-rule="evenodd" fill="#4A245A" cx="83" cy="69" r="2"></circle>
                                <circle id="circle-4-child" fill-rule="evenodd" fill="#FFFFFF" cx="50" cy="88" r="4"></circle>
                                <circle id="circle-4" fill-rule="evenodd" fill="#4A245A" cx="50" cy="88" r="2"></circle>
                                <circle id="circle-5-child" fill-rule="evenodd" fill="#ffffff" cx="17" cy="69" r="4"></circle>
                                <circle id="circle-5" fill-rule="evenodd" fill="#4A245A" cx="17" cy="69" r="2"></circle>
                                <circle id="circle-6-child" fill-rule="evenodd" fill="#ffffff" cx="17" cy="31" r="4"></circle>
                                <circle id="circle-6" fill-rule="evenodd" fill="#4A245A" cx="17" cy="31" r="2"></circle>
                                <circle id="circle-1-child" fill-rule="evenodd" fill="#ffffff" cx="50" cy="12" r="4"></circle>
                                <circle id="circle-1" fill-rule="evenodd" fill="#4A245A" cx="50" cy="12" r="2"></circle>
                                <circle id="circle-2-child" fill-rule="evenodd" fill="#ffffff" cx="83" cy="31" r="4"></circle>
                                <circle id="circle-2" fill-rule="evenodd" fill="#4A245A" cx="83" cy="31" r="2"></circle>
                                </g>
                                <path id="b-letter" fill="#FFFFFF" d="M52.67,30.995c2.578,0,4.698,0.283,6.361,0.85c1.927,0.812,2.891,2.486,2.891,5.021c0,2.289-0.729,3.884-2.188,4.782c-1.457,0.898-3.354,1.347-5.69,1.347H40.963v-12H52.67z M54.745,53.006c2.403,0.023,4.271,0.342,5.597,0.953c2.379,1.091,3.567,3.098,3.567,6.02c0,3.455-1.228,5.791-3.681,7.014c-1.353,0.658-3.244,0.99-5.67,0.99H40.962V53.006H54.745z M56.541,22.006L30,22v54.994L54.751,77c2.783,0,5.362-0.247,7.741-0.745c2.378-0.497,4.439-1.418,6.189-2.761c1.551-1.169,2.844-2.612,3.879-4.327C74.188,66.579,75,63.657,75,60.398c0-3.159-0.711-5.847-2.134-8.061c-1.423-2.213-3.532-3.831-6.328-4.851c1.84-0.944,3.233-1.989,4.178-3.133c1.691-2.04,2.538-4.739,2.538-8.097c0-3.258-0.839-6.056-2.516-8.394C67.953,24.058,63.223,22.105,56.541,22.006L56.541,22.006z"></path>
                                </g></svg>
                            </span>
                        </div>
                        <div class="frame">
                            <h3>Bootstrap 3 Based</h3>
                            <p>HTML layout based on Bootstrap framework. Bootstrap is a trusted, reliable and proven tool for developers.</p>
                        </div>
                    </li>
                    <li style="opacity: 1;">
                        <div class="visual">
                            <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/ico-3.png" width="100px" alt="image description" class="nosvg">
                            <span class="svg">
                                <svg version="1.1" id="responsive" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                                <g id="responsive-window" transform=" translate(0,0)">
                                <path id="window-body" fill="#35495E" d="M74,15H6c-3.313,0-6,2.686-6,6v73c0,3.313,2.687,6,6,6h68c3.314,0,6-2.687,6-6V21C80,17.686,77.314,15,74,15z"></path>
                                <rect id="shade" x="49" y="15" rx="5" fill-rule="evenodd" clip-rule="evenodd" fill="#000000" opacity="0.2" width="31" height="76" transform=" translate(0,0)" style="opacity: 0.2;"></rect>
                                <path id="window-bg" fill="#FFFFFF" d="M76,93c0,1.657-1.343,3-3,3H7c-1.657,0-3-1.343-3-3V32h72V93z"></path>
                                <circle id="close" fill-rule="evenodd" clip-rule="evenodd" fill="#D15527" cx="9" cy="24" r="3"></circle>
                                <circle id="hide" fill-rule="evenodd" clip-rule="evenodd" fill="#F19B2D" cx="17" cy="24" r="3"></circle>
                                <circle id="expand" fill-rule="evenodd" clip-rule="evenodd" fill="#53BB72" cx="25" cy="24" r="3"></circle>
                                <rect id="window-screen1" x="8" y="36" fill-rule="evenodd" clip-rule="evenodd" fill="#14A085" width="64" height="56"></rect>
                                <rect id="window-screen2" x="34" y="36" fill-rule="evenodd" clip-rule="evenodd" fill="#26B99A" width="38" height="56"></rect>
                                </g>
                                <g id="responsive-iphone" transform=" translate(0,0)">
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="#35495E" d="M94,0H58c-3.313,0-6,2.687-6,6v76.001c0,3.312,2.687,5.998,6,5.998h36c3.314,0,6-2.686,6-5.998V6C100,2.687,97.314,0,94,0z M96,74H56V14h40V74z"></path>
                                <rect id="iphone-bg" x="56" y="14" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" width="40" height="60"></rect>
                                <rect id="iphone-screen1" x="59" y="17" fill-rule="evenodd" clip-rule="evenodd" fill="#14A085" width="34" height="54"></rect>
                                <rect id="iphone-screen2" x="59" y="44" fill-rule="evenodd" clip-rule="evenodd" fill="#26B99A" width="34" height="27"></rect>
                                <path id="details-2" fill-rule="evenodd" clip-rule="evenodd" fill="#2C3D4F" d="M69.5,6h12C82.328,6,83,6.672,83,7.5C83,8.329,82.328,9,81.5,9h-12C68.672,9,68,8.329,68,7.5C68,6.672,68.672,6,69.5,6z"></path>
                                <path id="details-1" fill-rule="evenodd" clip-rule="evenodd" fill="#2C3D4F" d="M76,78.001c1.657,0,3,1.342,3,2.998c0,1.658-1.343,3-3,3c-1.656,0-3-1.342-3-3C73,79.343,74.344,78.001,76,78.001z"></path>
                                </g>
                                </svg>
                            </span>
                        </div>
                        <div class="frame">
                            <h3>Responsive Layout</h3>
                            <p>Expand your audience. Create a website with full mobile device support.</p>
                        </div>
                    </li>
                    <li style="opacity: 1;">
                        <div class="visual">
                            <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/ico-4.png" width="100px" alt="image description" class="nosvg">
                            <span class="svg">
                                <svg width="100px" height="100px" version="1.1" id="clock" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                                <circle fill="#33495f" cx="50" cy="50" r="50"></circle>
                                <path fill="#FFFFFF" d="M50,10c22.093,0,40,17.909,40,40c0,22.091-17.906,40-40,40c-22.091,0-40-17.909-40-40C10,27.909,27.91,10,50,10z"></path>
                                <path fill="#DAD9D9" d="M50,10.015c-11.806,0-22.413,5.119-29.733,13.254C27.352,16.896,36.723,13.015,47,13.015c22.085,0,39.986,17.902,39.986,39.985c0,10.277-3.881,19.646-10.254,26.729C84.871,72.41,89.988,61.805,89.988,50C89.988,27.917,72.086,10.015,50,10.015z"></path>
                                <path fill="none" d="M45.972,42.544c3.918-2.287,8.928-0.93,11.189,3.03c2.262,3.963,0.92,9.027-2.998,11.314c-3.918,2.286-8.928,0.93-11.189-3.031C40.713,49.896,42.054,44.832,45.972,42.544z"></path>
                                <path transform="rotate(315,50,50)" id="hrs" fill="#33495f" d="M46,27c0-2.209,1.791-4,4-4l0,0c2.209,0,4,1.791,4,4v19c0,2.209-1.791,4-4,4l0,0c-2.209,0-4-1.791-4-4V27z"></path>
                                <path transform="rotate(90,50,50)" id="min" fill="#33495f" d="M49.996,19.988C51.652,19.99,52.998,21.209,53,23v24c0,1.789-1.333,3.002-2.988,3c-1.658-0.002-3.01-1.209-3.012-3V23C46.999,21.21,48.34,19.986,49.996,19.988z"></path>
                                <circle fill="#33495f" cx="50" cy="50" r="8"></circle>
                                <path transform="rotate(225,50,50)" id="sec" fill="#E44D41" d="M52,24c0-1.104-0.896-2-2-2l0,0c-1.104,0-2,0.896-2,2v26c0,1.104,0.896,2,2,2l0,0c1.104,0,2-0.896,2-2V24z"></path>
                                </svg>
                            </span>
                        </div>
                        <div class="frame">
                            <h3>Save Time</h3>
                            <p>Generate new ideas; design new projects. Spend your time creating, not building basic parts.</p>
                        </div>
                    </li>
                    <li style="opacity: 1;">
                        <div class="visual">
                            <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/ico-5.png" width="117px" alt="image description" class="nosvg">
                            <span class="svg">
                                <svg version="1.1" id="retina" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="117px" height="104px" viewBox="0 0 117 104" enable-background="new 0 0 117 104" xml:space="preserve">
                                <circle fill="#26B99A" cx="50" cy="50" r="50"></circle>
                                <path id="glyph" fill="#FFFFFF" d="M81.309,43.339L45.441,79.208c-0.731,0.731-1.924,0.731-2.651,0L22.504,58.71c-0.362-0.366-0.556-1.374-0.556-1.858s0.194-0.947,0.556-1.315l5.404-4.871c0.366-0.375,0.855-0.555,1.338-0.55c0.476,0.001,0.951,0.185,1.313,0.55L42.79,63.143c0.728,0.743,1.92,0.743,2.651,0l27.918-27.834c0.728-0.737,1.92-0.737,2.646,0l5.303,5.354C82.04,41.396,82.04,42.604,81.309,43.339z"></path>
                                <g id="lens" transform="translate(81,35)">
                                <circle cx="-3.75" cy="3" r="26" opacity="0.15"></circle>
                                <g id="glass">
                                <circle fill="#ECF0F1" cx="0.75" cy="-1" r="29"></circle>
                                <circle fill="#26B99A" cx="0.75" cy="-1" r="26"></circle>
                                <clipPath id="lensmask" transform="translate(163,70)">
                                    <circle id="asdasd" cx="-0.25" cy="-1" r="26"></circle>
                                </clipPath>
                                <path id="largeGlyph" transform="translate(-163,-70)" clip-path="url(#lensmask)" fill="#FFFFFF" d="M162.9,87.166l-71.843,71.737c-1.464,1.463-3.854,1.463-5.311,0l-10.618-10.701c-1.457-1.48-3.854-3.884-5.311-5.364l-24.705-25.922c-0.725-0.732-1.114-1.753-1.114-2.727c0-0.968,0.389-1.894,1.114-2.631l10.824-9.74c0.733-0.75,1.715-1.111,2.68-1.102c0.952,0.004,1.903,0.369,2.63,1.102l24.499,24.958c1.457,1.489,3.847,1.489,5.311,0l55.922-55.671c1.458-1.475,3.846-1.475,5.303,0L162.9,81.811C164.366,83.281,164.366,85.697,162.9,87.166z"></path>
                                </g>
                                </g>
                                </svg>
                            </span>
                        </div>
                        <div class="frame">
                            <h3>Retina Ready</h3>
                            <p>Each element is made with vector-based shapes, so they work at any size. You can even print a billboard.</p>
                        </div>
                    </li>
                    <li style="opacity: 1;">
                        <div class="visual">
                            <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/ico-6.png" width="100px" alt="image description" class="nosvg">
                            <span class="svg">
                                <svg version="1.1" id="swatches" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                                <g id="pen-1" transform="rotate(0,50,50)">
                                <path id="body-1" fill="#E54E42" d="M50,74.001V100h0.072c-0.023,0-0.049,0.002-0.072,0.002c-12.816-0.008-25.662-4.828-35.417-14.584C4.812,75.646-0.008,62.838,0,50c0.009-12.816,4.829-25.662,14.583-35.417l0,0L33,33c-4.682,4.683-6.996,10.849-7,17c-0.004,6.162,2.31,12.311,7,17C37.683,71.684,43.848,73.996,50,74.001z"></path>
                                <path id="outer-1" fill-opacity="0.15" fill="#000000" enable-background="new    " d="M50,92C26.804,92,8,73.195,8,50c0-11.598,4.701-22.098,12.302-29.699l-5.719-5.718C7.868,21.299,0,33.438,0,50c0,27.062,21.625,50,50,50V92z"></path>
                                <path id="inner-1" fill-opacity="0.15" fill="#FFFFFF" enable-background="new    " d="M32.928,67c-4.689-4.689-7.003-10.838-7-17c0.004-6.151,2.316-12.317,7-17l-5.627-5.627c-5.791,5.79-9.373,13.79-9.373,22.627c0,17.673,14.327,32,32,32v-7.999C43.776,73.996,37.612,71.684,32.928,67z"></path>
                                <path id="wood-1" fill="#EFC22D" d="M63,87L50.014,74.009V74c-0.003,0-0.005,0.001-0.008,0.001L50.005,74L50,74.001c-3.309,0.011-6.009,5.826-6.009,13c0,7.181,2.709,13.001,6.022,13.001V99.98L63,87z"></path>
                                <path id="stylus-1" fill="#2D3E4F" d="M58.758,82.757C57.672,83.843,57,85.343,57,87c0,1.656,0.672,3.156,1.757,4.242L63,87L58.758,82.757z"></path>
                                </g>
                                <g id="pen-2" transform="rotate(0,50,50)">
                                <path id="body-2" fill="#29BB9C" d="M50,26.001V0.002h-0.072C49.951,0.002,49.976,0,50,0c12.816,0.008,25.662,4.828,35.417,14.584c9.771,9.771,14.592,22.58,14.584,35.417c-0.009,12.817-4.829,25.663-14.584,35.418l0,0L66.999,67.002c4.683-4.682,6.996-10.85,7-17c0.004-6.162-2.312-12.31-7-17C62.316,28.319,56.15,26.006,50,26.001z"></path>
                                <path id="inner-2" fill-opacity="0.1" fill="#000000" enable-background="new    " d="M66.999,33.002c4.688,4.689,7.004,10.838,7,17c-0.004,6.15-2.317,12.318-7,17l5.627,5.627c5.791-5.789,9.373-13.789,9.373-22.627c0-17.672-14.326-32-32-32v7.999C56.15,26.006,62.316,28.319,66.999,33.002z"></path>
                                <path id="outer-2" fill-opacity="0.15" fill="#FFFFFF" enable-background="new    " d="M50.001,8.001c23.195,0,41.999,18.805,41.999,42C92,61.6,87.299,72.1,79.698,79.7l5.72,5.718C92.133,78.702,100,66.563,100,50.001c0-27.062-21.624-50-49.999-50V8.001z"></path>
                                <path id="wood-2" fill="#EFC22D" d="M37,13.002l12.986,12.991v0.009c0.003,0,0.006-0.001,0.008-0.001l0.001,0.001L50,26.001c3.309-0.011,6.008-5.826,6.008-13C56.008,5.821,53.299,0,49.986,0v0.021L37,13.002z"></path>
                                <path id="stylus-2" fill="#2D3E4F" d="M41.242,17.245C42.328,16.159,43,14.659,43,13.002c0-1.656-0.672-3.156-1.757-4.242L37,13.002L41.242,17.245z"></path>
                                </g>
                                </svg>
                            </span>
                        </div>
                        <div class="frame">
                            <h3>Color Swatches</h3>
                            <p>It's easy to change the appearance of elements and switch colors using embedded color swatches.</p>
                        </div>
                    </li>
                    <li style="opacity: 1;">
                        <div class="visual">
                            <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/ico-7.png" width="100px" alt="image description" class="nosvg">
                            <span class="svg">
                                <svg version="1.1" id="fittogether" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="104px" height="104px" viewBox="0 0 104 104" enable-background="new 0 0 104 104" xml:space="preserve">
                                <circle id="shadow" opacity="0.05" cx="50" cy="54" r="50"></circle>
                                <circle id="bg" fill="#34495E" cx="54" cy="50" r="50"></circle>
                                <g id="shape" transform="rotate(0,54,50)">
                                <path id="whitehalf" fill="#FFFFFF" d="M54,91c-22,0-41-18.355-41-41S32,9,54,9C54,32.5,54,71.25,54,91z" transform="rotate(0,54,50)" data="white"></path>
                                <path id="darkhalf" fill="#34495E" d="M54,9c22,0,41,18.355,41,41S76,91,54,91C54,67.5,54,28.75,54,9z" transform="rotate(0,54,50)"></path>
                                <circle id="whilelarge" fill="#FFFFFF" cx="54.5" cy="70.5" r="20.5"></circle>
                                <circle id="darksmall" fill="#34495E" cx="54.5" cy="70.5" r="8.5"></circle>
                                <circle id="darklarge" fill="#34495E" cx="53.5" cy="29.5" r="20.5"></circle>
                                <circle id="whitesmall" fill="#FFFFFF" cx="54" cy="29.5" r="8.5"></circle>
                                </g>
                                </svg>
                            </span>
                        </div>
                        <div class="frame">
                            <h3>Perfect Matching</h3>
                            <p>Components are made using the same styles and match each other wonderfully.</p>
                        </div>
                    </li>
                    <li style="opacity: 1;">
                        <div class="visual">
                            <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/ico-8.png" width="100px" alt="image description" class="nosvg">
                            <span class="svg">
                                <svg version="1.1" id="aligned" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                                <clipPath id="iconmask">
                                    <circle cx="50" cy="50" r="50"></circle>
                                </clipPath>
                                <g clip-path="url(#iconmask)">
                                <path id="bg" fill="#34495E" d="M100,50c0,6.67-1.306,13.093-3.676,18.999C61.5,68.999,32.5,69,3.677,69C1.306,63.094,0,56.67,0,50C0,22.386,22.386,0,50,0C77.613,0,100,22.386,100,50z"></path>
                                <g id="surface">
                                <rect x="-1" y="70" fill="#D7DBDE" width="102" height="31"></rect>
                                <path fill="#FFFFFF" d="M100,71v29H0V71H100 M102,69h-2H0h-2v2v29v2h2h100h2v-2V71V69L102,69z"></path>
                                </g>
                                <g id="finger">
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="#DF9274" d="M-22.758-33.75c8.363-8.362,21.921-8.362,30.284,0l66.203,66.203c8.362,8.363,8.362,21.921,0,30.284c-4.034,4.033-9.441,6.262-14.729,6.262c-5.673,0-11.227-1.934-15.556-6.262L-22.758-3.465C-31.121-11.828-31.121-25.387-22.758-33.75z"></path>
                                <path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M61.215,19.844l12.5,12.5c6.195,6.195,7.804,15.227,4.856,22.91L61.275,37.958C56.276,32.959,56.259,24.87,61.215,19.844z"></path>
                                <path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M46.456,14.131c-0.391,0.391-1.023,0.391-1.414,0c-0.391-0.39-0.391-1.022,0-1.415l4.502-4.5l1.414,1.414L46.456,14.131z M39.456,16.132c-0.391,0.391-1.023,0.391-1.414,0s-0.391-1.024,0-1.414l9.002-9.002l1.414,1.414L39.456,16.132z"></path>
                                </g>
                                </g>
                                </svg>
                            </span>
                        </div>
                        <div class="frame">
                            <h3>Grid-Based Design</h3>
                            <p>Designed with alignment on 940/12 column grid. Sharp icons and glyphs include pixel-alignment.</p>
                        </div>
                    </li>
                    <li style="opacity: 1;">
                        <div class="visual">
                            <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/ico-9.png" width="100px" alt="image description" class="nosvg">
                            <span class="svg">
                                <svg version="1.1" id="spaceship" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                                <circle id="bg" fill="#33495F" cx="50" cy="50" r="50"></circle>
                                <g id="Stars" clip-path="url(#starmask)">
                                <path id="star0" opacity="0.2" fill="#f6f8f8" enable-background="new    " d="M91,4.5c2.55-0.45,4.051-1.95,4.5-4.5c0.45,2.55,1.951,4.05,4.5,4.5c-2.549,0.451-4.05,1.95-4.5,4.5C95.051,6.45,93.55,4.951,91,4.5z"></path>
                                <path id="star1" opacity="0.1" fill="#f6f8f8" enable-background="new    " d="M91,4.5c2.55-0.45,4.051-1.95,4.5-4.5c0.45,2.55,1.951,4.05,4.5,4.5c-2.549,0.451-4.05,1.95-4.5,4.5C95.051,6.45,93.55,4.951,91,4.5z"></path>
                                <path id="star2" opacity="0.1" fill="#f6f8f8" enable-background="new    " d="M91,4.5c2.55-0.45,4.051-1.95,4.5-4.5c0.45,2.55,1.951,4.05,4.5,4.5c-2.549,0.451-4.05,1.95-4.5,4.5C95.051,6.45,93.55,4.951,91,4.5z"></path>
                                </g>
                                <clipPath id="starmask">
                                    <circle cx="50" cy="50" r="50"></circle>
                                </clipPath>
                                <clipPath id="rocketmask2">
                                    <path id="rocketmask1" d="M100,50c0,27.614-22.387,50-50,50C22.386,100,0,77.614,0,50S22.386,0,50,0c14.117,0,50,0,50,0S100,36.503,100,50z"></path>
                                </clipPath>
                                <g id="rocket-maskgroup">
                                <g id="rocket-raw" clip-path="url(#rocketmask2)">
                                <path id="det7" fill="#E94B35" d="M100,0.1c-0.156,0.018-0.117,0.058-0.1-0.1C76.584,2.979,63.361,12.281,55.865,22.035c-0.268,0.349-0.528,0.698-0.782,1.047c-0.002,0.003-0.005,0.007-0.008,0.01C47.015,34.196,46.087,45.812,46,49h-1l-1,3l4,4l3-1v-1c1.152-0.021,3.741-0.111,7.066-0.773l0.002,0.002C58.797,53.047,59,53.305,59,57c0,4.062,0,6.609,0,9c0,1.809,0.943,2.497,1.945,1.494c2.423-2.428,3.003-3.023,8.5-8.528c4.16-4.167,4.676-6.595,2.957-11.059C83.953,41.369,96.432,27.888,100,0.1z"></path>
                                <path id="det6" fill="#C23824" d="M48,56l-4-4l1-3h2l4,4v2L48,56z M52,28c-1.718-0.69-2-1-4-1s-4.183,1.38-6.861,4.063c-4.254,4.259-4.85,4.839-8.516,8.508C31.425,40.771,33.263,41,36,41c5.233,0,9.297-0.125,10.791,1.42C48.764,44.46,52,28,52,28z"></path>
                                <path id="det5" fill="#C23824" d="M100,0C100.1,0,100,0,100,0c-0.639,4.973-1.566,9.579-2.721,13.678c-1.049-1.97-2.562-4.364-4.5-6.272c-2.151-2.12-4.812-3.632-6.826-4.585C91.979,1.091,96.783,0.412,100,0z"></path>
                                <path id="det4" opacity="0.3" fill="#FFFFFF" enable-background="new    " d="M72.402,47.907c1.719,4.463,1.312,6.788-2.854,10.954c-0.844,0.844-7.828,7.859-8.604,8.633C59.941,68.496,59.033,67.809,59,66c-0.01-0.521,0.003,0.021,0-0.652c3-3,9.689-8.938,11-11.348c0.768-1.411,0.352-3.654,0-5c-3.312,1.76-11.516,4.094-11.932,4.229l0,0C54.906,53.875,52.467,53.943,51,54v-0.656c0,0,29.975-9.663,49-53.344c0.014,0-0.064,0.008,0,0C96.406,28.047,83.953,41.369,72.402,47.907z"></path>
                                <g id="det3">
                                <path fill="#FFFFFF" d="M77.5,28c-3.584,0-6.5-2.916-6.5-6.5s2.916-6.5,6.5-6.5s6.5,2.916,6.5,6.5S81.084,28,77.5,28z"></path>
                                <path fill="#C23824" d="M77.5,16c3.037,0,5.5,2.462,5.5,5.5S80.537,27,77.5,27S72,24.538,72,21.5S74.463,16,77.5,16 M77.5,14c-4.137,0-7.5,3.364-7.5,7.5s3.363,7.5,7.5,7.5s7.5-3.364,7.5-7.5S81.637,14,77.5,14L77.5,14z"></path>
                                </g>
                                <path id="det2" fill="#D7DCDE" d="M44,52l4,4L13,92l-6-6L44,52z"></path>
                                <path id="det1" fill="#F7F7F7" d="M43.875,52l2,2L7.5,91.5l-3-3L43.875,52z"></path>
                                </g>
                                </g>
                                </svg>

                            </span>
                        </div>
                        <div class="frame">
                            <h3>Extremely Light &amp; Fast</h3>
                            <p>Light and clean code installs with ease and is only few kilobytes. </p>
                        </div>
                    </li>
                    <li style="opacity: 1;">
                        <div class="visual">
                            <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/ico-10.png" width="100px" alt="image description" class="nosvg">
                            <span class="svg">
                                <svg version="1.1" id="freefont" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                                <clipPath id="circlemask">
                                    <circle cx="50" cy="50" r="50" id="groupmask"></circle>
                                </clipPath>
                                <circle id="bg" fill="#D7DBDE" cx="50" cy="50" r="50"></circle>
                                <g clip-path="url(#circlemask)" id="group">
                                <polygon id="shadow" fill-rule="evenodd" clip-rule="evenodd" fill="#BDC3C7" points="10.167,147.834 79,79 21,21 -52,94 "></polygon>
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="#ECF0F1" d="M-47.5,80c-3.033,0-5.5-2.468-5.5-5.5v-49c0-3.033,2.467-5.5,5.5-5.5h49C4.533,20,7,22.467,7,25.5v49C7,77.532,4.533,80,1.5,80H-47.5z"></path>
                                <path fill="#8B9298" d="M1.25,21C3.735,21,6,23.015,6,25.5v49C6,76.985,3.985,79,1.5,79h-49c-2.485,0-4.5-2.015-4.5-4.5v-49c0-2.485,2.015-4.5,4.5-4.5H1 M1.5,19h-49c-3.584,0-6.5,2.916-6.5,6.5v49c0,3.584,2.916,6.5,6.5,6.5h49C5.084,81,8,78.084,8,74.5v-49C8,21.916,5.084,19,1.5,19L1.5,19z"></path>
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="#ECF0F1" d="M62.5,8C59.468,8,57,5.533,57,2.5v-49c0-3.033,2.468-5.5,5.5-5.5h49c3.032,0,5.5,2.467,5.5,5.5v49c0,3.033-2.468,5.5-5.5,5.5H62.5z"></path>
                                <path fill="#8B9298" d="M111.25-51c2.485,0,4.75,2.015,4.75,4.5v49c0,2.485-2.015,4.5-4.5,4.5h-49C60.015,7,58,4.985,58,2.5v-49c0-2.485,2.015-4.5,4.5-4.5H111 M111.5-53h-49c-3.584,0-6.5,2.916-6.5,6.5v49C56,6.084,58.916,9,62.5,9h49c3.584,0,6.5-2.916,6.5-6.5v-49C118-50.084,115.084-53,111.5-53L111.5-53z"></path>
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="#ECF0F1" d="M-11.5,8C-14.533,8-17,5.533-17,2.5v-49c0-3.033,2.467-5.5,5.5-5.5h49c3.033,0,5.5,2.467,5.5,5.5v49C43,5.533,40.533,8,37.5,8H-11.5z"></path>
                                <path fill="#8B9298" d="M37.25-51c2.485,0,4.75,2.015,4.75,4.5v49C42,4.985,39.985,7,37.5,7h-49C-13.985,7-16,4.985-16,2.5v-49c0-2.485,2.015-4.5,4.5-4.5H37 M37.5-53h-49c-3.584,0-6.5,2.916-6.5,6.5v49c0,3.584,2.916,6.5,6.5,6.5h49C41.084,9,44,6.084,44,2.5v-49C44-50.084,41.084-53,37.5-53L37.5-53z"></path>
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="#ECF0F1" d="M62.5,152c-3.032,0-5.5-2.468-5.5-5.5v-49c0-3.032,2.468-5.5,5.5-5.5h49c3.032,0,5.5,2.468,5.5,5.5v49c0,3.032-2.468,5.5-5.5,5.5H62.5z"></path>
                                <path fill="#8B9298" d="M111.25,93c2.485,0,4.75,2.015,4.75,4.5v49c0,2.485-2.015,4.5-4.5,4.5h-49c-2.485,0-4.5-2.015-4.5-4.5v-49c0-2.485,2.015-4.5,4.5-4.5H111 M111.5,91h-49c-3.584,0-6.5,2.916-6.5,6.5v49c0,3.584,2.916,6.5,6.5,6.5h49c3.584,0,6.5-2.916,6.5-6.5v-49C118,93.916,115.084,91,111.5,91L111.5,91z"></path>
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="#ECF0F1" d="M-11.5,152c-3.033,0-5.5-2.468-5.5-5.5v-49c0-3.032,2.467-5.5,5.5-5.5h49c3.033,0,5.5,2.468,5.5,5.5v49c0,3.032-2.467,5.5-5.5,5.5H-11.5z"></path>
                                <path fill="#8B9298" d="M37.25,93c2.485,0,4.75,2.015,4.75,4.5v49c0,2.485-2.015,4.5-4.5,4.5h-49c-2.485,0-4.5-2.015-4.5-4.5v-49c0-2.485,2.015-4.5,4.5-4.5H37 M37.5,91h-49c-3.584,0-6.5,2.916-6.5,6.5v49c0,3.584,2.916,6.5,6.5,6.5h49c3.584,0,6.5-2.916,6.5-6.5v-49C44,93.916,41.084,91,37.5,91L37.5,91z"></path>
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="#ECF0F1" d="M98.5,80c-3.032,0-5.5-2.468-5.5-5.5v-49c0-3.033,2.468-5.5,5.5-5.5h49c3.032,0,5.5,2.467,5.5,5.5v49c0,3.032-2.468,5.5-5.5,5.5H98.5z"></path>
                                <path fill="#8B9298" d="M147.25,21c2.485,0,4.75,2.015,4.75,4.5v49c0,2.485-2.015,4.5-4.5,4.5h-49c-2.485,0-4.5-2.015-4.5-4.5v-49c0-2.485,2.015-4.5,4.5-4.5H147 M147.5,19h-49c-3.584,0-6.5,2.916-6.5,6.5v49c0,3.584,2.916,6.5,6.5,6.5h49c3.584,0,6.5-2.916,6.5-6.5v-49C154,21.916,151.084,19,147.5,19L147.5,19z"></path>
                                <g id="button">
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="#ECF0F1" d="M25.5,80c-3.033,0-5.5-2.468-5.5-5.5v-49c0-3.033,2.467-5.5,5.5-5.5h49c3.032,0,5.5,2.467,5.5,5.5v49c0,3.032-2.468,5.5-5.5,5.5H25.5z"></path>
                                <path id="buttonstroke" fill="#8B9298" d="M74.25,21c2.485,0,4.75,2.015,4.75,4.5v49c0,2.485-2.015,4.5-4.5,4.5h-49c-2.485,0-4.5-2.015-4.5-4.5v-49c0-2.485,2.015-4.5,4.5-4.5H74 M74.5,19h-49c-3.584,0-6.5,2.916-6.5,6.5v49c0,3.584,2.916,6.5,6.5,6.5h49c3.584,0,6.5-2.916,6.5-6.5v-49C81,21.916,78.084,19,74.5,19L74.5,19z"></path>
                                <g id="pimple">
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="#E1E5E6" d="M59,69c0,1.104-0.896,2-2,2H43c-1.104,0-2-0.896-2-2l0,0c0-1.104,0.896-2,2-2h14C58.104,67,59,67.896,59,69L59,69z"></path>
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M59,69H41l0,0c0-1.104,0.896-2,2-2h14C58.104,67,59,67.896,59,69L59,69z"></path>
                                </g>
                                <g id="letters">
                                <path id="symbol-o" opacity="0" fill="#00A184" d="M42.542,53.379c0.362,1.254,0.902,2.38,1.622,3.381c0.719,1,1.619,1.791,2.701,2.37c1.081,0.58,2.29,0.87,3.628,0.87c1.347,0,2.564-0.295,3.656-0.885c1.09-0.588,1.988-1.372,2.693-2.349c0.705-0.978,1.241-2.1,1.607-3.367C58.816,52.133,59,50.83,59,49.493c0-1.337-0.184-2.639-0.55-3.907c-0.366-1.267-0.905-2.392-1.614-3.374c-0.71-0.982-1.604-1.763-2.68-2.343C53.079,39.29,51.858,39,50.493,39c-1.356,0-2.565,0.288-3.628,0.863c-1.063,0.575-1.959,1.366-2.687,2.371c-0.729,1.005-1.274,2.132-1.636,3.381S42,48.156,42,49.493C42,50.83,42.181,52.126,42.542,53.379z M47.327,55.867c-0.835-0.738-1.435-1.678-1.8-2.818c-0.366-1.14-0.548-2.325-0.548-3.557c0-1.214,0.183-2.395,0.548-3.544c0.365-1.149,0.963-2.094,1.794-2.836S49.21,42,50.493,42c1.285,0,2.341,0.369,3.168,1.106c0.826,0.738,1.427,1.679,1.8,2.823c0.374,1.146,0.561,2.333,0.561,3.563c0,1.238-0.187,2.429-0.561,3.568c-0.373,1.141-0.976,2.078-1.806,2.812c-0.831,0.732-1.886,1.1-3.162,1.1C49.218,56.973,48.162,56.604,47.327,55.867z"></path>
                                <path id="symbol-t" opacity="0" fill="#00A184" d="M55.5,39h-10c-0.829,0-1.5,0.671-1.5,1.5s0.671,1.5,1.5,1.5H49v16.5c0,0.828,0.671,1.5,1.5,1.5c0.828,0,1.5-0.672,1.5-1.5V42h3.5c0.828,0,1.5-0.671,1.5-1.5S56.328,39,55.5,39z"></path>
                                <path id="symbol-f" fill="#00A184" d="M54.5,42c0.828,0,1.5-0.671,1.5-1.5S55.328,39,54.5,39h-7c-0.829,0-1.5,0.671-1.5,1.5v18c0,0.828,0.671,1.5,1.5,1.5s1.5-0.672,1.5-1.5V51h4.5c0.828,0,1.5-0.672,1.5-1.5c0-0.829-0.672-1.5-1.5-1.5H49v-6H54.5z"></path>
                                <path id="symbol-n" opacity="0" fill="#00A184" d="M56.5,39c-0.828,0-1.5,0.671-1.5,1.5v13.046l-9.252-13.878h0C45.479,39.266,45.021,39,44.5,39c-0.829,0-1.5,0.671-1.5,1.5v18c0,0.828,0.671,1.5,1.5,1.5s1.5-0.672,1.5-1.5V45.454l9.252,13.878h0.001C55.521,59.734,55.979,60,56.5,60c0.828,0,1.5-0.672,1.5-1.5v-18C58,39.671,57.328,39,56.5,39z"></path>
                                <path id="symbol-e" opacity="0" fill="#00A184" d="M53.5,51c0.828,0,1.5-0.672,1.5-1.5c0-0.829-0.672-1.5-1.5-1.5H49v-6h4.5c0.828,0,1.5-0.671,1.5-1.5S54.328,39,53.5,39h-6c-0.829,0-1.5,0.671-1.5,1.5v18c0,0.828,0.671,1.5,1.5,1.5h6c0.828,0,1.5-0.672,1.5-1.5S54.328,57,53.5,57H49v-6H53.5z"></path>
                                <path id="symbol-r" opacity="0" fill="#00A184" d="M50.883,51H51c3.313,0,6-2.687,6-6s-2.687-6-6-6h-5.5c-0.829,0-1.5,0.671-1.5,1.5v18c0,0.828,0.671,1.5,1.5,1.5s1.5-0.672,1.5-1.5v-7.366l7.373,8.356c0.297,0.336,0.71,0.508,1.126,0.508c0.353,0,0.706-0.124,0.991-0.375c0.621-0.548,0.681-1.496,0.133-2.117L50.883,51z M47,42h4c2.209,0,3,0.791,3,3s-0.791,3-3,3h-4V42z"></path>
                                </g>
                                <path id="hl" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M74.5,21h-49c-1.76,0-3.268,1.02-4.007,2.493C22.099,23.188,22.774,23,23.5,23h49c2.485,0,4.5,2.015,4.5,4.5v49c0,0.726-0.188,1.4-0.492,2.008C77.979,77.768,79,76.26,79,74.5v-49C79,23.015,76.985,21,74.5,21z"></path>
                                </g>
                                </g>
                                <path id="shade" opacity="0.15" d="M50,0C22.386,0,0,22.386,0,50c0,0.335,0.019,0.666,0.025,1C0.56,24.955,21.827,4,48,4c26.509,0,48,21.491,48,48c0,26.172-20.954,47.44-47,47.975c0.334,0.007,0.665,0.025,1,0.025c27.614,0,50-22.387,50-50C100,22.386,77.614,0,50,0z"></path>
                                </svg>

                            </span>
                        </div>
                        <div class="frame">
                            <h3>Free Font</h3>
                            <p>No expensive fonts here. Let’s use open-source fonts.</p>
                        </div>
                    </li>
                </ul>
            </div>
        </section>






        <span class="share-section-cont"></span>
    </article>
</div>



<div style="clear:both;"></div>


<div style="clear:both;"></div>


    </div><!--end articles container-->
    <div style="clear:both;"></div>
    </div><!--end content-wrapper-->
    </div><!-- end main-wrapper -->
